<template>
  <div class="flex-col content">
    <div class="header flex">
      <div class="flex-center ml-15">标题</div>
    </div>
    <div class="flex flex-1" style="overflow: auto">
      <div class="left flex-col">
        <div class="left-header">
          <div
            style="
              width: 1px;
              height: 80%;
              background-color: #fff;
              margin: 6px;
              margin-right: 20px;
            "
          ></div>
          <div class="mr-20">
            <span class="mr-15">共</span>
            <span style="color: red">{{ totalNum }}</span>
            <span class="ml-15">件</span>
          </div>
        </div>
        <div class="flex-1" style="overflow: auto">
          <div
            v-for="(item, index) in leftList"
            :key="index"
            class="flex-col"
            style="
              align-items: space-between;
              padding: 12px;
              border-bottom: 1px solid #ccc;
            "
          >
            <div class="flex align-center">
              <div class="flex-1">{{ item.name }}</div>
              <div style="width: 40px">{{ item.price }}</div>
              <div class="mr-10" style="width: 40px">{{ item.num }}</div>
              <el-icon
                @click="handledel(item, index)"
                color="#FD807D"
                style="cursor: pointer"
                ><RemoveFilled
              /></el-icon>
            </div>
            <div
              v-if="item.num > 1"
              style="
                color: #999;
                display: flex;
                justify-content: flex-end;
                margin-top: 10px;
              "
            >
              小计：<span>{{ item.num * item.price }}</span>
            </div>
          </div>
        </div>
        <div class="left-bottom flex-col">
          <div class="flex" style="width: 100%">
            <el-button
              @click="handleRest"
              type="primary"
              style="
                width: 50%;
                height: 60px;
                padding: 0;
                margin-left: 0;
                border: 0;
                border-radius: 0;
              "
              >清空</el-button
            >
            <el-button
              type="danger"
              style="
                width: 50%;
                height: 60px;
                padding: 0;
                margin-left: 0;
                border: 0;
                border-radius: 0;
              "
              >挂单</el-button
            >
          </div>
          <div
            class="flex align-center"
            style="
              background-color: #e7f4dd;
              height: 50px;
              color: #7bc155;
              padding: 16px;
            "
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              alt=""
              style="width: 50px; height: 50px"
            />
            <div class="flex-col ml-10">
              <div>来宾</div>
              <div>
                <span>余额：<span>0</span></span>
                <span class="ml-5">积分：<span>0</span></span>
              </div>
            </div>
          </div>
          <div
            class="align-center p-30"
            style="
              background-color: #ff5556;
              color: #fff;
              height: 20px;
              font-size: 30px;
              cursor: pointer;
            "
          >
            <span>收</span><span class="ml-30">款</span
            ><span class="ml-30">¥{{ result }}</span>
          </div>
        </div>
      </div>
      <div class="right flex-col flex-1">
        <div class="right-top flex">
          <div
            class="flex-1 flex-wrap flex-center"
            :style="{ color: ' #fff', height: '60px' }"
          >
            <div
              v-for="(item, index) in rtarr[page]"
              :key="index"
              class="block text-center flex-center list-item"
              :class="index === current ? 'active' : ''"
              @click="handleItem(index)"
            >
              {{ item }}
            </div>
          </div>
          <div class="flex-col" style="width: 20%">
            <el-button @click="handlelast" class="flex-center icon">
              <el-icon style="color: #fff"><CaretTop /></el-icon
            ></el-button>
            <el-button @click="handlenext" class="flex-center icon">
              <el-icon style="color: #fff"><CaretBottom /></el-icon
            ></el-button>
          </div>
        </div>
        <div class="flex-1 flex-wrap right-content">
          <div
            v-for="(item, index) in list"
            :key="index"
            class="item flex"
            @click="handleshop(item, index)"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              alt=""
              style="width: 40%; height: 100%"
            />
            <div class="flex-col p-10" style="justify-content: space-between">
              <div>{{ item.name }}</div>
              <div style="color: red">¥{{ item.price }}</div>
            </div>
          </div>
        </div>
        <div
          class="align-center pb-10 pl-10 pr-10"
          style="background-color: #ffe09f"
        >
          <el-input
            @input="handlechange"
            v-model="input"
            style="width: 240px"
            placeholder="条码、拼音码、品名"
            :prefix-icon="Search"
          />
          <el-button class="ml-15" type="success">无码商品</el-button>
        </div>
        <div class="right-bottom align-center flex-between">
          <div
            v-for="(item, index) in rbarr"
            :key="item.id"
            class="flex-col flex-center"
          >
            <img style="width: 20px; height: 20px" :src="item.icon" alt="" />
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const rbarr = ref([])
const rtarr = ref([])
const list = ref([])
const leftList = ref([])
let input = ref()
let page = ref(0)
let current = ref(0)
let result = ref(0)
let totalNum = ref(0)
let currentName = ref()
axios
  .get('/api/category.json')
  .then((response) => {
    //把结果按照八个一组分类放置
    const result = []
    for (let i = 0; i < response.data.length; i += 8) {
      result.push(response.data.slice(i, i + 8))
    }
    rtarr.value = result
    currentName.value = rtarr.value[0][0]
  })
  .catch((error) => {
    // 请求失败处理逻辑
    console.error(error)
  })
axios
  .get('/api/setconfig.json')
  .then((response) => {
    // 请求成功处理逻辑
    rbarr.value = response.data
  })
  .catch((error) => {
    // 请求失败处理逻辑
    console.error(error)
  })
axios
  .get('/api/products.json')
  .then((response) => {
    //根据currentName和category对比进行分组
    list.value = response.data.filter(
      (item) => item.category == currentName.value
    )
    console.log(list.value)
  })
  .catch((error) => {
    // 请求失败处理逻辑
    console.error(error)
  })
const handlelast = () => {
  if (page.value > 0) {
    page.value--
  }
}
const handlenext = () => {
  if (page.value < rtarr.value.length - 1) {
    page.value++
  }
}
const handlechange = (e) => {
  //根据输入的e来筛选
  //根据currentName和category对比进行分组
  if (e) {
    list.value = list.value.filter((item) => {
      return item.name.indexOf(e) !== -1
    })
  } else {
    axios
      .get('/api/products.json')
      .then((response) => {
        //根据currentName和category对比进行分组
        list.value = response.data.filter(
          (item) => item.category == currentName.value
        )
        console.log(list.value)
      })
      .catch((error) => {
        // 请求失败处理逻辑
        console.error(error)
      })
  }
}
//tianjai商品
const handleshop = (e, i) => {
  //把结果插入leftList如果id一样增加num字段然后加一
  result.value += e.price
  if (leftList.value.length > 0) {
    let index = leftList.value.findIndex((item) => item.id === e.id)
    if (index !== -1) {
      leftList.value[index].num++
    } else {
      e.num = 1
      leftList.value.push(e)
    }
  } else {
    e.num = 1
    leftList.value.push(e)
  }
  console.log(leftList.value)
  //循环遍历找到num的总值放入totalNum
  totalNum.value = 0
  leftList.value.forEach((item) => {
    totalNum.value += item.num
  })
}
const handledel = (e, i) => {
  //把结果插入leftList如果id一样增加num字段然后加一
  result.value -= e.price
  if (leftList.value.length > 0) {
    let index = leftList.value.findIndex((item) => item.id === e.id)
    if (index !== -1) {
      if (leftList.value[index].num > 1) {
        leftList.value[index].num--
      } else {
        leftList.value.splice(index, 1)
      }
    }
  }
  //循环遍历找到num的总值放入totalNum
  totalNum.value = 0
  leftList.value.forEach((item) => {
    totalNum.value += item.num
  })
}
const handleRest = () => {
  result.value = 0
  leftList.value = []
  totalNum.value = 0
}

const handleItem = (i) => {
  current.value = i
  currentName.value = rtarr.value[page.value][i]
  axios
    .get('/api/products.json')
    .then((response) => {
      //根据currentName和category对比进行分组
      list.value = response.data.filter(
        (item) => item.category == currentName.value
      )
      console.log(list.value)
    })
    .catch((error) => {
      // 请求失败处理逻辑
      console.error(error)
    })
}
</script>

<style scoped lang="scss">
.content {
  width: 100vw;
  height: 100vh;
}
.header {
  height: 50px;
  color: #fff;
  background-color: #009acc;
}
.left {
  width: 20%;
  &-header {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 6px;
    color: #009acc;
    background-color: #d6e8eb;
  }
}
.right {
  &-top {
    background-color: #0085b0;
    .block {
      height: 60px;
      width: 25%;
      cursor: pointer;
      box-shadow: inset 0 0 1px #333;
    }
    .active {
      background-color: #24b1da;
    }
    .icon {
      width: 100%;
      height: 60px;
      margin-left: 0;
      cursor: pointer;
      border: 0;
      color: #000;
      border-radius: 0;
      background-color: #88cc33;
      box-shadow: inset 0 0 1px #333;
    }
    .list-item::after {
      content: '';
      width: 1px;
      height: 100%;
    }
  }
  &-content {
    overflow: auto;
    padding: 16px;
    display: grid;
    grid-column-gap: 16px;
    grid-row-gap: 4px;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: rgba(255, 224, 159);
    .item {
      height: 120px;
      padding: 0;
      cursor: pointer;
      margin-bottom: 15px;
      background-color: #fff;
    }
  }
  &-bottom {
    height: 60px;
    padding: 6px 30px;
    color: #fff;
    cursor: pointer;
    background-color: #009acc;
  }
}
</style>
